<template>
  <div class="father">
    <h3>父组件</h3>
    <h4 v-show="toy">子给的玩具：{{ toy }}</h4>
    <!-- 给子组件Child绑定事件 @send-toy叫自定义事件,自己取名的-->
    <Child @send-toy="saveToy" />
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from "./Child.vue";
  import { ref } from "vue";
  // 数据
  let toy = ref("");
  // 用于保存传递过来的玩具
  function saveToy(value: string) {
    console.log("saveToy", value);
    toy.value = value;
  }
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .father button {
    margin-right: 5px;
  }
</style>
